(function ($) {
    $.fn.drag = function (options) {
        var x, drag = this, isMove = false, defaults = {};
        var options = $.extend(defaults, options);
        //添加背景，文字，滑块
        var html = '<div class="drag_bg"></div>' +
            '<div class="drag_text" onselectstart="return false;" unselectable="on">向右滑动验证</div>' +
            '<div class="handler handler_bg"> > ></div>';
        this.append(html);
        var zhanghao = document.getElementById("zhanghao")
        var handler = drag.find('.handler');
        var drag_bg = drag.find('.drag_bg');
        var text = drag.find('.drag_text');
        var maxWidth = drag.width() - handler.width();  //能滑动的最大间距
//            console.log(drag.width())

        function touchStart(e) {
            if (zhanghao.value){
                isMove = true;
                x = e.targetTouches[0].pageX - parseInt(handler.css('left'), 10);
            }
        }

        function touchMove(e) {
//                console.log(maxWidth)

            var _x = e.targetTouches[0].pageX - x;
//                console.log(e.targetTouches[0].pageX)
            if (isMove) {
                if (_x > 0 && _x <= maxWidth) {
                    handler.css({'left': _x});
                    drag_bg.css({'width': _x});
                } else if (_x > maxWidth) {  //鼠标指针移动距离达到最大时清空事件
                    dragOk();
                }
            }
        }

        function touchEnd(e) {
            isMove = false;
            var _x = e.pageX - x;
            if (_x < maxWidth) { //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
                handler.css({'left': 0});
                drag_bg.css({'width': 0});
            }
        }

        function dragOk() {
            handler.removeClass('handler_bg').addClass('handler_ok_bg');
            text.text('验证通过');
            text.css({'color': '#fff'});
            handler.text("");
            handler.unbind('mousedown');
            $(document).unbind('mousemove');
            $(document).unbind('mouseup');
            window.location.href = "forget.html";
        }
        var drag = document.getElementById("drag")

        drag.addEventListener("touchend", touchEnd, false);
        drag.addEventListener("touchstart", touchStart, false);
        drag.addEventListener("touchmove", touchMove, false);


        //清空事件
    }
})(jQuery);